<template>
    <div>
       <div class="limiter">
        <div class="container container-login100">
            <div class="wrap-login100">
                <div class="login100-form-title">
                    <span class="login100-form-title-1">绿地安全卫士</span>
                </div>
                <div class="title-text">
                  <span :class="CodeOrPwd?'code-login':''" @click="codeLogin()">验证码登录</span> 
                  <span :class="!CodeOrPwd?'code-login':''" @click="pwdLogin()">密码登录</span> 
                </div>
                <form class="login100-form validate-form">
                    <div class="wrap-input100 validate-input m-b-26" data-validate="用户名不能为空">
                        <span class="label-input100">用户名</span>
                        <input class="input100" type="text" name="username" v-model="userName" placeholder="请输入用户名">
                        <span class="focus-input100"></span>
                    </div>
                    <transition name="el-fade-in-linear">
                    <div class="code-warp wrap-input100 validate-input m-b-18" data-validate="验证码不能为空" v-show="CodeOrPwd">
                       <span class="label-input100">验证码</span>
                        <input class="input100" type="number" v-model="code" name="pass" placeholder="请输入用户名">
                        <span class="focus-input100"></span>
                    </div>
                    </transition>
                     <transition name="el-fade-in-linear">
                        <el-button type="success" class="code-btn" v-show="CodeOrPwd" round @click="getCode()">获取验证码</el-button>
                     </transition>
                   <transition name="el-fade-in-linear">
                    <div class="wrap-input100 validate-input m-b-18" data-validate="密码不能为空" v-show="!CodeOrPwd">
                        <span class="label-input100">密码</span>
                        <input class="input100" type="password" v-model="passWorld" name="pass" placeholder="请输入用户名">
                        <span class="focus-input100"></span>
                    </div>
                    </transition>
                    <transition name="el-fade-in-linear">
                    <div class="remeber-me flex-sb-m w-full p-b-30" v-show="!CodeOrPwd">
                        <div>
                            <a href="javascript:" class="txt1">忘记密码？</a>
                        </div>
                    </div>
                    </transition>
                    <div class="container-login100-form-btn">
                        <el-button type="success" @click="Login()" class="login-btn" round>登 录</el-button>
                    </div>
                </form>
            </div>
        </div>
    </div>
    </div>
</template>

<script>
import {GetLoingCode,PostLoginSubmit,AxiosGet} from '../../axios'
export default {
    name: 'LoginMain',

    data() {
        return {
            userName:'',
            passWorld:'',
            CodeOrPwd:true,
            code:''
        };
    },
    mounted() {
    },
    methods: {
        Login(){
            let user={
                phone:this.userName,
                password:this.passWorld,
                userId:this.code
            }
            PostLoginSubmit(user).then(success=>{
                AxiosGet('user/findUserByPhone/'+this.userName).then(sucess=>{
                    if(sucess.data.role[0].roleName == 'insert'){
                       this.$notify({title: '失败',message:"您的账号没有权限！",type: 'error'});
                       console.log(success);
                       return
                    }
                    this.$ls.set("loginUser",sucess.data,30*60*1000)
                    this.$notify({title:"sucess",message: "登录成功",type: 'success'});
                    this.$router.push("/home")
                })
            }).catch(error=>{
                console.log(error);
            })
        },
        getCode(){
            GetLoingCode(this.userName).then(sucess=>{
                if(sucess.status !=200 ){
                     this.$notify({title: '失败',message: sucess.msg,type: 'error'});
                     return
                }
                this.code=sucess.data
                this.$notify({title: '获取验证码成功',message: '模拟手机验证码！',type: 'success'});
            })
        },
        codeLogin(){
            this.CodeOrPwd=true
            this.passWorld=''
        },
        pwdLogin(){
            this.CodeOrPwd=false
            this.code=''
        }

    },
};
</script>

<style scoped>
@import '../../assets/css/login/util.css';
@import '../../assets/css/login/main.css';
.code-login{
    color: #67c23a;
}
.title-text{
    display: flex;
    align-items: center;
    justify-content: center;
    height: 50px;
}
.title-text span{
    margin: 0px 20px;
    cursor: pointer;
}
.login100-form{
    margin-top: -20px;
}
.code-warp{
    /* height: 0px; */
    width: 100px;
} 
.code-btn{
    display: inline-block;
    margin: 0;
    padding: 0;
    background-color:#fff ;
    color: #67c23a;
    font-size: 12px;
    height: 38px;
    margin-top: 5px;
}
.txt1{
    margin-left: 150px;
}
.login-btn{
    width:150px;
}
.login100-form-title{
    background-image: url(../../assets/image/bg-01.jpg);
}
.remeber-me{
    height: 50px;
}
.limiter{
  height: 100%;
    /* background: url(https://cn.bing.com/th?id=OHR.WindmillDay_ZH-CN3115996668_1920x1080.jpg&rf=LaDigue_1920x1080.jpg&pid=h) no-repeat 100%; */
  background-repeat:no-repeat;
  background-size:100%;
    
}
.container,container-login100{
    height: 200px;
}
.wrap-login100{
    margin-top: 00px; ;
}
</style>